<!--字典项页-->
<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">权限管理</span>
    <el-button @click="goBack" type="primary" style="float:right;margin-top:13px;">返回</el-button>
  </div>
  <!-- 字典项搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="权限名称">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchForm.permName"
                  @keydown.enter.prevent="selectDictOption"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="selectDictOption">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin:20px;">
    <div style="margin:10px 0px 40px 10px;">
      字典项列表
      <el-button type="primary" v-if="!roleId" style="float: right;margin-top:-3px;" @click="beforeAddDicOption">新增权限</el-button>
    </div>
    <el-table :data="permArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="permName" label="权限名称" align="center"/>
      <el-table-column prop="parentName" label="父级权限" align="center"/>
      <el-table-column prop="path" label="权限地址" align="center"/>
      <el-table-column prop="remark" label="备注信息" align="center" width="320"/>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column label="操作" align="center" v-if="!roleId" >
        <template #default="scope">

          <el-button type="primary"  link @click="editDictOption(scope.row.id)">编辑</el-button>
          <el-button type="primary" link @click="deleteDictOption(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 保存字典项弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;"
             :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-form-item label="权限名称">
        <el-input placeholder="请输入" v-model="saveDictOptionForm.permName"></el-input>
      </el-form-item>
      <el-form-item label="父级权限">
        <el-input placeholder="请输入" v-model="saveDictOptionForm.parentId"></el-input>
      </el-form-item>
      <el-form-item label="权限路径">
        <el-input placeholder="请输入" v-model="saveDictOptionForm.path"></el-input>
      </el-form-item>
      <el-form-item label="备注信息">
        <el-input placeholder="请输入" v-model="saveDictOptionForm.remark"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveDictOption">保存</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
//定义返回的方法
import {onMounted, ref} from "vue";
import router from "@/router";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

// 定义变量来保存搜索条件
// 获取URL中的查询字符串参数
// window.location代表一整个URL地址
// window.location.search代表URL中的查询条件
// 将此查询符转换成对象，通过get('id')的方式获取
const roleId = new URLSearchParams(window.location.search).get('id')
// 定义变量来保存搜索条件
const searchForm=ref({
  permName:'',
  parentId:'',
  roleId:roleId


})
const permArr = ref([])
// 定义查询字典项的方法
const selectDictOption = ()=>{
// 先将对象转为qs字符串
  let data = qs.stringify(searchForm.value)
//   向后端发送请求
  axios.get(BASE_URL+'8081'+'/v1/perm/select?'+data)
      .then((response)=>{
        if (response.data.code==2000){
          permArr.value=response.data.data
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
// 在钩子函数中
onMounted(()=>{
  selectDictOption()
})

// 新建字典项
const beforeAddDicOption =()=>{
//   显示弹窗
  dialogVisible.value=true
//   修改题目
  dialogTitle.value='新增权限'
}
// 定义返回到字典页面的方法
const goBack = () => {
  router.push('/role');
}


// 定义重置的方法
const resetSearch=()=>{
// 这里清空时不能清空dicId的值，否则会出现所有字典项
  searchForm.value={}
  selectDictOption()
}
// 定义弹窗的是否出现
const dialogVisible = ref(false)
// 弹窗的题目
const dialogTitle =ref('')
// 定义关闭弹窗前的方法
const handleClose =()=>{
  if (confirm("是否关闭此窗口？")){
    dialogVisible.value=false
    saveDictOptionForm.value={
      roleId:roleId,
      label:'',
      value:'',
      sort:'',
      remark:''}
  }
}
// 定义保存新增+更新字典项时的表单数据
const saveDictOptionForm =ref({
  roleId:roleId,
  label:'',
  value:'',
  sort:'',
  remark:''
})
// 定义保存新增+更新字典项时的方法
const saveDictOption = ()=>{
// 将表单的数据转为查询字符串
  let data = saveDictOptionForm.value
//   向后端发送请求
  axios.post(BASE_URL+'8081'+'/v1/perm/save',data)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success("保存成功")
          //   关闭弹窗
          dialogVisible.value=false
          //   使表单数据为空
          saveDictOptionForm.value={
            // label:'',
            // value:'',
            // sort:'',
            // remark:''
          }
          //   重新加载数据
          selectDictOption()
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
//

// 定义编辑的方法
const editDictOption=(id)=>{
// 弹出弹窗
  dialogVisible.value=true
//   修改题目为编辑字典项
  dialogTitle.value='编辑权限'
//   向后端发送请求并回显数据
  axios.get(BASE_URL+'8081'+'/v1/perm/select?id='+id)
      .then((response)=>{
        if (response.data.code==2000){
          saveDictOptionForm.value=response.data.data[0]
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
// 定义删除的方法
const deleteDictOption=(id)=> {
//   出现确认框
  if (confirm("是否确认删除此字典项？")){
    //   向后端发送请求
    axios.post(BASE_URL+'8081'+'/v1/perm/delete/'+id)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("删除成功")
            //   刷新页面
            selectDictOption()
          }
        })
  }
}
</script>

<style scoped>

</style>